<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
    <title>LoadQueue - Hilo Example</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
    <script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
    <script type="text/javascript" src="../src/util/debug.js" data-auto="true"></script>
    <style type="text/css">
    .hilo-log{
        max-height: 200px !important;
    }
    </style>
</head>
<body onload="init();">
    <div id="header">
        <h1>LoadQueue</h1>
        <p>LoadQueue是一个资源的队列下载和管理工具。</p>
    </div>
    <div id="game-container"></div>
    <script type="text/javascript" src="js/demo.js"></script>
    <script type="text/javascript">
        function init(){
            //init stage
            var stage = new Hilo.Stage({
                renderType:renderType,
                container: gameContainer,
                width: stageWidth,
                height: stageHeight
            });

            //start stage ticker
            var ticker = new Hilo.Ticker(20);
            ticker.addTick(stage);
            ticker.start();

            //create a load queue
            var queue = new Hilo.LoadQueue();

            //set max connections of the load queue, the default is 2.
            queue.maxConnections = 1;

            //add sources
            queue.add([
                {id:'fish', noCache:true, src:'images/fish.png'},
                {id:'data', type:'jsonp', callback:'weekJSONP', src:'http://img1.tbcdn.cn/L1/584/1/20.js'}
            ]);

            //custom css loader
            queue.add({id:'taobao_css', type:'css', src:'http://g.tbcdn.cn/tbc/tmsg/3.0.2/index-min.css', loader:{
                load: function(data){
                    var link = document.createElement('link');
                    link.type = 'text/css';
                    link.rel = 'stylesheet';
                    if(data.id) link.id = data.id;
                    link.addEventListener('load', this.onLoad.bind(this), false);
                    link.addEventListener('error', this.onError.bind(this), false);
                    link.href = data.src;
                    document.getElementsByTagName('head')[0].appendChild(link);
                },
                onLoad: function(e){
                    return e.target;
                },
                onError: function(e){
                    return e;
                }
            }});

            //load event handlers
            queue.on('load', function(e){
                console.log('load:', e.detail.src, queue.getLoaded(), queue.getTotal());
            }).on('complete', function(e){
                console.log('complete');

                //create a bitmap if the image loaded
                var bmp = new Hilo.Bitmap({
                    image: queue.getContent('fish'),
                    rect: [0, 0, 174, 126],
                    x: 75,
                    y: 50
                }).addTo(stage);
            }).on('error', function(e){
                console.log('error:', e.detail.src);
            });

            //start load queue
            queue.start();
        }
    </script>
</body>
</html>